<template>
  <div>
    <a-menu
      style="width: 100%"
      :open-keys.sync="openKeys"
      mode="inline"
      theme="dark"
      @click="handleClick"
    >
      <a-sub-menu v-for="menu in menus" :key="menu.id">
        <span slot="title">
          <a-icon :type="menu.menuIcon" />
          <span>{{menu.menuName}}</span>
        </span>
        <a-menu-item v-for="childMenu in menu.childMenus" :key="childMenu.id">
          <!-- <a-icon :type="childMenu.menuIcon" /> -->
          <span>{{childMenu.menuName}}</span>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: ['mail'],
      openKeys: ['sub1'],
      menus: [
        {
          id: 1,
          menuName: "系统设置", 
          menuIcon: "setting",
          childMenus:[
            {
              id: 3,
              menuName: "用户管理",
              meneUrl: "",
              menuIcon: "",
            },
            {
              id: 4,
              menuName: "菜单管理",
              meneUrl: "",
              menuIcon: "",
            },
          ]
        },
        {
          id: 2,
          menuName: "网站设置", 
          menuIcon: "setting",
          childMenus:[
            {
              id: 5,
              menuName: "菜单管理",
              meneUrl: "",
              menuIcon: "",
            },
            {
              id: 6,
              menuName: "文章管理",
              meneUrl: "",
              menuIcon: "",
            },
            {
              id: 7,
              menuName: "用户申请",
              meneUrl: "",
              menuIcon: "",
            },
          ]
        },
      ]
    };
  },
  watch: {
    openKeys(val) {
      console.log('openKeys', val);
    },
  },
  methods: {
    handleClick(e) {
      console.log('click', e);
    },
    titleClick(e) {
      console.log('titleClick', e);
    },
  },
};
</script>

<style>

</style>